/* -------------对css的扩展------------------ */
// 字重
@each $weight in normal, bold, lighter, bolder {
  .font-weight-#{$weight} {
    font-weight: #{$weight};
  }

  .f-w-#{$weight} {
    font-weight: #{$weight};
  }
}

@for $weight from 1 through 10 {
  .font-weight-#{$weight} {
    font-weight: #{$weight * 100};
  }

  .f-w-#{$weight} {
    font-weight: #{$weight * 100};
  }
}

// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
@for $i from 10 through 80 {
  .f-#{$i} {
    font-size: #{$i}rpx;
  }
}

// 文字居中方式

@each $position in left, center, right {
  .text-#{$position} {
    text-align: #{$position};
  }

  .t-#{$position} {
    text-align: #{$position};
  }
}

// margin 和padding x y 轴上

// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
  .p-#{$i} {
    padding: $i + rpx !important;
  }

  .m-#{$i} {
    padding: $i + rpx !important;
  }

  .m-l-#{$i} {
    margin-left: $i + rpx !important;
  }

  .m-r-#{$i} {
    margin-right: $i + rpx !important;
  }

  .m-t-#{$i} {
    margin-top: $i + rpx !important;
  }

  .m-b-#{$i} {
    margin-bottom: $i + rpx !important;
  }

  .p-l-#{$i} {
    padding-left: $i + rpx !important;
  }

  .p-r-#{$i} {
    padding-right: $i + rpx !important;
  }

  .p-t-#{$i} {
    padding-top: $i + rpx !important;
  }

  .p-b-#{$i} {
    padding-bottom: $i + rpx !important;
  }

  .m-x-#{$i} {
    margin-left: $i + rpx !important;
    margin-right: $i + rpx !important;
  }

  .m-y-#{$i} {
    margin-top: $i + rpx !important;
    margin-bottom: $i + rpx !important;
  }

  .p-x-#{$i} {
    padding-left: $i + rpx !important;
    padding-right: $i + rpx !important;
  }

  .p-y-#{$i} {
    padding-top: $i + rpx !important;
    padding-bottom: $i + rpx !important;
  }
}

@for $weight from 1 through 10 {
  .font-weight-#{$weight} {
    font-weight: #{$weight * 100};
  }

  .f-w-#{$weight} {
    font-weight: #{$weight * 100};
  }
}

// 定义圆角，历遍1-30
@for $i from 0 through 100 {
  .rounded-#{$i} {
    border-radius: $i + rpx !important;
  }

  @each $short, $long in tl top-left, tr top-right, bl bottom-left,
    br bottom-right
  {
    // 缩写版，结果如： b-tl-30
    // 定义圆角
    .rounded-#{$short}-#{$i} {
      border-#{$long}-radius: $i + rpx !important;
    }
  }
}

.rounded {
  border-radius: 50%;
}

// 边界自动伸缩
@each $short, $long in l left, t top, r right, b bottom {
  // 缩写版，结果如： m-l-auto
  // 定义外边距auto
  .m-#{$short}-auto {
    margin-#{$long}: auto !important;
  }

  // 定义外边距
  .p-#{$short}-auto {
    padding-#{$long}: auto !important;
  }

  .margin-#{$long}-auto {
    margin-#{$long}: auto !important;
  }

  .padding-#{$long}-auto {
    padding-#{$long}: auto !important;
  }
}

/*---------------------滑动-----------------------*/
.overflow-x {
  overflow-x: auto;
}

.overflow-y {
  overflow-y: auto;
}

.overflow {
  overflow: hidden;
}

/*---------------------宽高-----------------------*/
.vh-full {
  height: 100%;
}

.vw-full {
  width: 100%;
}

@for $count from 0 through 100 {
  .vh-#{$count} {
    height: #{$count}vh !important;
  }

  .vw-#{$count} {
    width: #{$count}vw !important;
  }
}

@for $count from 0 through 750 {
  .h-#{$count} {
    height: #{$count}rpx !important;
  }

  .w-#{$count} {
    width: #{$count}rpx !important;
  }

  .bottom-#{$count} {
    bottom: $count + rpx !important;
  }

  .top-#{$count} {
    top: $count + rpx !important;
  }

  .right-#{$count} {
    right: $count + rpx !important;
  }

  .left-#{$count} {
    left: $count + rpx !important;
  }
}
